<template>
    <div class="invoice">
        <el-header class="title" style="position: relative;top: 20px;font-size: 30px">
            <i class="el-icon-user-solid">代开发票</i>
        </el-header>
        <el-divider></el-divider>
        <div class="message">
            <div class="bg-purple">案件：<br>{{law.caseNo}}</div>
            <div class="bg-purple">委托人：<br>{{law.caseWtr}}</div>
            <div class="bg-purple">案由：<br>{{law.caseCause}}</div>
            <div class="bg-purple">代理费：<br>{{law.caseAgencyfee}}</div>
            <div class="bg-purple">已收到款项(已收到的款)：<br>{{law.casePaidsal}}</div>
            <div class="bg-purple">已开发票(已经开过的发票)：<br>{{law.caseInvoiced}}</div>
            <div class="bg-purple">办案律师：<br>{{law.caseAttorney}}</div>
        </div>
        <el-form :model="cwInvoice" label-width="100px" label-position="top" style="margin-left: 20px">
            <div class="require">
                <el-container style="margin-top: 20px">
                    <el-form-item label="发票抬头：">
                        <el-input v-model="cwInvoice.cwInvoiceTitle" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="开票金额：" style="margin-left: 20px">
                        <el-input type="number" v-model="cwInvoice.cwInvoiceMoney" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="开票项目：">
                        <el-select v-model="cwInvoice.cwInvoiceItem" :value="cwInvoice.cwInvoiceItem" style="width: 500px;">
                            <el-option label="律师代理费" value="1"></el-option>
                            <el-option label="法律顾问费" value="2"></el-option>
                            <el-option label="咨询费" value="3"></el-option>
                            <el-option label="法务托管费" value="4"></el-option>
                            <el-option label="非诉" value="5"></el-option>
                            <el-option label="其他" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开具类型：" style="margin-left: 20px">
                        <el-select v-model="cwInvoice.cwOpenType" :value="cwInvoice.cwOpenType" style="width: 500px;">
                            <el-option label="企业" value="1"></el-option>
                            <el-option label="个人" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="发票类型：">
                        <el-select v-model="cwInvoice.cwInvoiceType" :value="cwInvoice.cwInvoiceItem" style="width: 500px;">
                            <el-option label="增值税专用发票" value="1"></el-option>
                            <el-option label="增值税普通发票" value="2"></el-option>
                            <el-option label="通用机打发票" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="纳税人识别号：" style="margin-left: 20px">
                        <el-input v-model="cwInvoice.cwTaxpayerIdentityNumber" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="发票号：">
                        <el-input v-model="cwInvoice.cwInvoiceNumber" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>
            </div>

            <div class="other-container">
                <el-header class="title" style="position: relative;top: 20px;left:-20px;font-size: 30px">
                    <i class="el-icon-user-solid">其他选填</i>
                    <el-button size="small" @click="handleToggleOther" class="toogle">{{other.text}}</el-button>
                </el-header>

                <div class="other" v-if="other.enable">
                    <el-container>
                        <el-form-item label="基本开户银行：">
                            <el-input v-model="cwInvoice.cwBasicBankofdeposit" style="width: 500px;"></el-input>
                        </el-form-item>
                        <el-form-item label="基本开户账号：" style="margin-left: 20px">
                            <el-input v-model="cwInvoice.cwAccountNumber" style="width: 500px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="注册场所地址：">
                            <el-input v-model="cwInvoice.cwRegisteredAddress" style="width: 500px;"></el-input>
                        </el-form-item>
                        <el-form-item label="注册固定电话：" style="margin-left: 20px">
                            <el-input v-model="cwInvoice.cwFixedlineTelephone" style="width: 500px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="税务登记证副本复印件：">
                            <el-upload
                                    name="multipartfile"
                                    action="http://localhost/upload"
                                    :headers="{token:this.$store.state.token}"
                                    :data="{folder:'invoice'}"
                                    class="upload-demo"
                                    ref="upload"
                                    :limit="1"
                                    :multiple="false"
                                    :auto-upload="false"
                                    :on-success="handleUploadSuccess">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-input v-model="cwInvoice.recordFileId" v-show="false"></el-input>
                    </el-container>

                    <el-container>
                        <el-form-item label="申请备注：">
                            <el-input type="textarea" v-model="cwInvoice.cwApplicationRemark" style="width: 1000px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="开票备注：">
                            <el-input type="textarea" v-model="cwInvoice.cwInvoiceRemark" style="width: 1000px;"></el-input>
                        </el-form-item>
                    </el-container>
                </div>

                <el-container style="margin-top: 20px">
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmitForm">确认提交</el-button>
                        <el-button @click="handleBack">返回</el-button>
                    </el-form-item>
                </el-container>
            </div>
        </el-form>
    </div>
</template>

<script>
    import {CwInvoiceService} from "../../../model/ww/cw_invoice/CwInvoiceService";
    const cwInvoiceService = CwInvoiceService.getInstance()

    export default {
        props:['law','active'],
        data() {
            return {
                cwInvoice:{
                    cwInvoiceItem:'1',
                    cwOpenType:'1',
                    cwInvoiceType:'1',
                    caseLawId:this.law.id,
                    cwInvoiceMoney:0
                },
                other:{
                    text:'展开',
                    enable:false
                },
            }
        },
        methods:{
            //切换其他选项是否显示
            handleToggleOther(){
                this.other.enable = !this.other.enable
                if(this.other.enable){
                    this.other.text = '收起'
                }else{
                    this.other.text = '展开'
                }
            },
            //表单提交的方法
            handleSubmitForm(){
                //校验
                if(!cwInvoiceService.check(this.cwInvoice)){
                    return
                }
                //保存发票信息
                cwInvoiceService.save(this.cwInvoice).then(response => {
                    if(response.data.code === 0){
                        this.$message.success({
                            message:'提交成功',
                            duration:2000
                        })
                        this.$emit('completed')
                    }else{
                        this.$message.error({
                            message:response.data.message,
                            duration:2000
                        })
                    }
                })
            },
            handleBack(){
                this.$emit('back')
            },
            handleUploadSuccess(response){
                this.cwInvoice.recordFileId = response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            }
        },
        watch:{
            law:{
                handler(){
                    this.cwInout.caseLawId = this.law.id
                },
                deep:true
            }
        }
    }
</script>

<style scoped>
    .invoice{
        width: 100%;
    }
    .require{
        width: 100%;
    }
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
    .other-container{
        width: 100%;
    }
    .other{
        width: 100%;
    }
    .toogle{
        position: relative;
        top: -5px;
        margin-left: 30px;
    }
</style>